<template>
  <n-modal v-model:show="proxyVisible" v-bind="$attrs">
    <n-card
      style="width: 600px"
      title="模态框"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra> 噢！ </template>
      <ExampleForm style="width: 100%"></ExampleForm>
      <template #footer> 尾部 </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
const props = defineProps<{ visible: boolean }>()
const emits = defineEmits<{ (e: 'close'): void }>()

const proxyVisible = computed({
  get() {
    return props.visible
  },
  set(val: boolean) {
    if (!val) {
      emits('close')
    }
  }
})

const testProvide = inject('testProvide')
console.log(props, testProvide, 'testProvide')
</script>
